/**
 * @description 此组件为折线
 * @example
 * {idName： bar,
 *  xAxis: ['星期一', '星期二'],
 *  data: [
 *  {label: 'legend1', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]},
 * {label: 'legend2', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]}，
 * ]
 * }
 * @author gf
 * @todo 在不影响已有功能的情况下可增加props
 */

import { useEffect } from "react";
import * as echarts from "echarts";
import {
  axisLabelStyle,
  axisLineStyle,
  splitLineStyle,
  TOOLTIP_FONT_SIZE,
  yaxisLabelStyle,
  yaxisLineStyle,
} from "@/utils/echarts";
import useIoObserve from "@/hook/useIoObserve";
import * as _ from "lodash";

interface VProps {
  key: string; // 与x轴对应的值
  value: number; // y轴对应的值
}

export interface DataProps {
  label: string; // legend对应的中文
  value: VProps[];
}

export interface StackBarProps {
  idName: string; // 每一个echarts图需要一个dom来创建实例，该id用来标识唯一dom
  xAxis: string[]; // x轴为字符串数组
  legend: string[];
  data: DataProps[];
  color?: string[];
  isStack?: boolean; // 是否堆叠
  percent?: boolean;
  legendStyle?: Object;
  gridStyle?: Object;
  seriesStyles?: Object;
  propsAxisLabelStyle?: Object;
}

const StackBarVer = (props: StackBarProps) => {
  const {
    idName,
    xAxis,
    data,
    legend,
    color,
    isStack = true,
    percent,
    legendStyle,
    gridStyle,
    seriesStyles,
    propsAxisLabelStyle,
  } = props;
  // console.log('data:............', data);
  
  const handleMultiLineData = (arr: any, str?: string) => {
    let res: any = [];
    arr.map((v) => {
      res.push([v.key, v.value]);
    });
    console.log("res****************", res, str);
    return res;
  };

  const options = {
    color,
    tooltip: {
      trigger: "axis",
      zIndex: 2,
      backgroundColor: "rgba(65,69,81,0.96)",
      extraCssText: "border-radius:2px",
      borderWidth: 0,
      textStyle: {
        fontSize: TOOLTIP_FONT_SIZE,
        color: "#fff",
        lineHeight: "28px",
      },
      //   valueFormatter: (value) => {
      //     return (
      //       (_.isNumber(value) ? value : "-") +
      //       (percent && _.isNumber(value) ? "%" : "")
      //     );
      //   },
    },
    xAxis: {
      type: "value",
      axisLabel: {
        ...axisLabelStyle(),
        fontSize: 10,
        margin: 8,
        ...propsAxisLabelStyle,
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLine: {
        ...axisLineStyle(),
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: xAxis,
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      ...yaxisLineStyle(),
      axisLine: {
        ...yaxisLineStyle(),
        show: true,
      },
      axisLabel: {
        ...yaxisLabelStyle(percent ? "%" : "", 0),
        inside: false,
        verticalAlign: 'middle',
        // padding: [15, 0, 0, 0],
        fontSize: 10,
        lineHeight: 12
      },
      ...splitLineStyle(),
    },
    grid: {
      left: 10,
      right: 20,
      bottom: 6,
      top: 58,
      containLabel: true,
      ...gridStyle,
    },
    legend: {
      data: legend,
      icon: "rectangle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      top: 25,
      left: 10,
      textStyle: {
        fontSize: 10,
        color: "#35425e",
        width: 48,
        height: 28,
        lineHeight: 28,
        // padding: [0, 0, -3, 2],
        padding: [0, 0, 0, 0],
      },
      ...legendStyle,
      type: 'scroll',
      pageIconSize: 6
    },
    series: data?.map((v) => {
      return {
        name: v.label,
        data: v.value,
        type: "bar",
        // barWidth: 20,
        barMaxWidth: 20,
        stack: isStack,
        ...seriesStyles,
      };
    }),
  };

  const handleGenBar = () => {
    const dom = document.getElementById(idName);
    // console.log('dom:', dom);
    
    if (dom) {
      const myChart = echarts.init(dom);
      myChart.setOption(options);
    }
  };

  // 窗口大小改变
  const handleChangeSize = () => {
    setTimeout(() => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      handleGenBar();
    }, 1);
  };

  useIoObserve(null, handleChangeSize, idName);

  useEffect(() => {
    handleGenBar();
    // console.log('useeffect...', data, legend, xAxis);
    
    window.addEventListener("resize", handleChangeSize);
    return () => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      window.removeEventListener("resize", handleChangeSize);
    };
  }, [JSON.stringify(data), xAxis, legend]);

  return (
    <div
      id={idName}
      style={{ width: "100%", height: "100%" }}
      onClick={(e) => {
        e.stopPropagation();
      }}
    ></div>
  );
};

export default StackBarVer;
